<template>
	<div class="row">
		<div class="col-sm-12 text-center home">
			<div class="bg">
				<h1>欢迎大家品尝Pizza</h1>
				<h2>这里有你非常喜欢的pizza</h2>
				<button class="btn btn-success" @click="goToMenu">跳转到上一次浏览的页面</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		methods:{
			goToMenu(){
				//跳转到上一次浏览的页面
				//this.$router.go(-1)
				
				//跳转指定的地址
				//this.$router.replace('/menu')
				
				//指定跳转路由的名字下
				//this.$router.replace({name:'menuLink'})
				
				//通过push进行跳转
				//this.$router.push('/menu')
				this.$router.push({name:'menuLink'})
			}
		}
	}
</script>

<style scoped="scoped">
	.home{
		background: url(../assets/pizza.jpg);
		height: 80vh;
	}
	h1,h2{
		margin: 6%;
	}
	.bg{
		max-width: 70vw;
		opacity: 0.7;
		margin: 6%;
		background: #eee;
		padding: 20px 0;
	}
</style>